<template>
	<view>
		<u-navbar back-text="返回" title="我的评价"></u-navbar>
		<view class="container">

			<view class="review-list">
				<u-card v-for="(review, index) in reviews" :key="index" 
					:border="false" :title="review.orderNo" class="review-card" 
					@click="toOrderDetail(review.orderNo)">
					<view slot="body">
						<view class="head">
							<text class="username">{{ review.username }}</text>
							<text class="date">{{ review.date }}</text>
						</view>
						<view class="rating">
							<u-rate :value="review.rating" :size="24" />
						</view>
						<view class="comment">
							<text>{{ review.comment }}</text>
						</view>
						<view class="feedback">
							<text class="feedback-label">{{ review.feedbackType }}</text>
						</view>
					</view>

				</u-card>
			</view>

		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				reviews: [{
						username: 'Alice',
						date: '2024-09-07',
						rating: 5,
						comment: '非常满意，服务态度很好！',
						feedbackType: '好评',
						orderNo:'11'
					},
					{
						username: 'Bob',
						date: '2024-09-06',
						rating: 4,
						comment: '整体不错，但希望能加快速度。',
						feedbackType: '好评',
						orderNo:'11'
					},
					{
						username: 'Charlie',
						date: '2024-09-05',
						rating: 2,
						comment: '体验不好，服务有待改进。',
						feedbackType: '差评',
						orderNo:'11'
					}
				]
			};
		},
		methods:{
			toOrderDetail(orderNo){
				uni.navigateTo({
					url: '/pages/driver/order_detail'
				});
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		background-color: #f5b4e9;
	}

	.header {
		margin-bottom: 10px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		text-align: center;
	}

	.review-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.review-card {
		background-color: #ffffff;
		/* padding: 5px; */
		border-radius: 8px;
	}

	.rating {
		margin-bottom: 10px;
	}

	.comment {
		font-size: 16px;
		color: #333;
	}

	.feedback {
		margin-top: 10px;
	}

	.feedback-label {
		font-size: 14px;
		color: #ff4500;
		/* 可以根据需要修改颜色 */
	}
	.head {
	    display: flex;
	    justify-content: space-between; /* 子元素在左右两边对齐 */
	    align-items: center; /* 垂直居中对齐 */
	}
	.username {
	    font-family: 'Arial', sans-serif; /* 修改字体 */
	    font-size: 16px; /* 修改字体大小 */
	    color: #333; /* 修改字体颜色 */
	}
</style>